<template>
    <view class="userLayout">
		<view class="bgcolorMine"></view>
        <view class="userInfo">
            <view class="avatar">
                <image :src="userMain.url" mode="aspectFill" @tap="chooseImg"></image>
				<view class="siu"><ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url_u"
                    @cancel="oncancel" @ok="onok"></ksp-cropper></view>
                
            </view>
            <view>点击头像更换</view>
            <view class="ip">昵称：{{userMain.username}}</view>
            <view class="address">性别：{{userMain.sex}}</view>
			<view class="account">账户：{{userMain.account}}</view>
        </view>
        <view class="section">
            <view class="list">
                <navigator url="/pages/cardManager/cardManager">
                    <view class="row">
                        <view class="left">
                            <uni-icons type="images" size="25" color="#1296db"></uni-icons>
                            <view class="text">球星卡详情</view>
                        </view>
                        <view class="right">
                            <uni-icons type="right" size="20" color="#1296db"></uni-icons>
                        </view>
                    </view>
                </navigator>
                <navigator url="/pages/setPersonalMes/setPersonalMes">
                    <view class="row">
                        <view class="left">
                            <uni-icons type="person" size="25" color="#1296db"></uni-icons>
                            <view class="text">个人信息设置</view>
                        </view>
                        <view class="right">
                            <uni-icons type="right" size="20" color="#1296db"></uni-icons>
                        </view>
                    </view>
                </navigator>
                <navigator url="/pages/book/book">
                    <view class="row">
                        <view class="left">
                            <uni-icons type="wallet" size="25" color="#1296db"></uni-icons>
                            <view class="text">预约信息</view>
                        </view>
                        <view class="right">
                            <uni-icons type="right" size="20" color="#1296db"></uni-icons>
                        </view>
                    </view>
                </navigator>
            </view>
        </view>
<!--        <navigator url="/pages/login/login"> -->
            <button type="primary" class="button" @click="onClick">退出</button>
<!--        </navigator> -->
    </view>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" title="提醒" content="您确认要退出吗？" @confirm="dialogConfirm"
		@close="dialogClose"></uni-popup-dialog>
	</uni-popup>
</template>


<script setup>
	import { onMounted, ref } from 'vue'
	const avatar_1 =ref("/static/image.png") 
	import {onShow} from "@dcloudio/uni-app"
	const url_u = ref("")
	const alertDialog = ref(null);
	const userMain = ref([]);
	import {
		baseUrl
	} from '../../tool/tool';
	const app = getApp();
	// console.log('Global account:', app.globalData.account);
	let myaccount = ref(123)
	onShow(()=>{
		console.log(12);
		console.log('Global account:', app.globalData.account);
		uni.request({
			url: baseUrl + "/UserAccount/getuser?account=" + app.globalData.account,
			method: "POST",
			// data: {
			// 	account:"123"
			// },//myaccount.value,
			success(res) {
				console.log(res.data)
				userMain.value=res.data;
			}
		})
	})
	function onClick() {
		if(alertDialog.value){
			alertDialog.value.open();
		}
	}
	function dialogConfirm(){
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}

	function chooseImg() {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'], //指定类型为压缩过的图片
			sourceType: ['album'],
			success: function(res) {
				console.log(JSON.stringify(res.tempFilePaths));
				url_u.value = res.tempFilePaths[0];
			}
		})
	}

	function onok(ev) {
		url_u.value = "";
		avatar_1.value = ev.path
	}
	
	function oncancel() {
		url_u.value = ""
	}
</script>

<style lang="scss" scoped>
	.bgcolorMine {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
		z-index: -1;
	}
	.userLayout {
		.userInfo {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 50rpx 0;

			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
			.siu{
				margin-left: -300rpx;
			}

			.ip {
				font-size: 35rpx;
				color: #333;
				padding: 20rpx 0 5rpx;
			}

			.address {
				font-size: 25rpx;
				color: #aaa;
			}
		}

		.section {
			width: 690rpx;
			margin: 50rpx auto;
			border: 1rpx solid #eee;
			border-radius: 14rpx;
			box-shadow: 0 0 35rpx rgba(0, 0, 0, 0.1);

			.list {
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 100rpx;
					border-bottom: 1rpx solid #eee;

					.left {
						display: flex;
						align-items: center;

						.text {
							padding-left: 20rpx;
							color: #777;
							;
						}
					}

					.right {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.button {
			width: 50%;
			/* 		display: flex; */
			justify-content: space-between;
			align-items: center;
		}

		.button .text {
			display: flex;
			justify-content: center;
			/* 文本水平居中 */
			align-items: center;
			/* 文本垂直居中 */
		}
	}
</style>